<template>
  <div class="order">
    <div class="search">
      <div class="up">
        <span>商品名称</span>
        <el-input v-model="input" placeholder="请输入商品名称" style="width: 160px"></el-input>
        <span>状态</span>
        <el-select v-model="value1" placeholder="请选择">
          <el-option
              v-for="item in options1"
              :key="item.value1"
              :label="item.label"
              :value="item.value1">
          </el-option>
        </el-select>
        <span>商品类型</span>
        <el-select v-model="value2" placeholder="请选择">
          <el-option
              v-for="item in options2"
              :key="item.value2"
              :label="item.label"
              :value="item.value2">
          </el-option>
        </el-select>
      </div>
      <div style="margin-top: 20px">
        <span>下单时间</span>
        <el-date-picker
            v-model="value"
            type="date"
            placeholder="选择日期"
            style="margin-right: 40px">
        </el-date-picker>
        <el-button type="danger">搜索</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
    <div class="edit">
      <el-button type="danger" @click="dialogFormVisible = true">上架商品</el-button>
      <el-button>批量操作</el-button>
    </div>
    <div class="table">
      <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="id"
            label="商品编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="itemItemName"
            label="商品名称"
            width="200">
        </el-table-column>
        <el-table-column
            prop="itemPrice"
            label="商品价格"
            width="150">
        </el-table-column>
        <el-table-column
            prop="itemItemType"
            label="商品类型"
            width="150">
        </el-table-column>
        <el-table-column
            prop="orderStatus"
            label="状态"
            width="120">
          <template>
            <el-tag>上架中</el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="totalPrice"
            label="操作">
          <template solt-scope="scope">
            <el-button type="warning" @click="Takedown()">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dialog">
      <el-dialog title="上架商品" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="商品编号" :label-width="formLabelWidth">
            <el-input v-model="form.itemId" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addItem()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  // activated() {
  //   if (this.$route.query.id !== undefined) {
  //
  //   }
  // },
  mounted() {
    this.shopId = this.$route.query.id;
    // let user=JSON.parse(localStorage.getItem("user"));
    // let token=user.token;
    this.$axios
        .get("http://localhost:2321/shop/pageQueryItem",{
              params:{
                shopId:this.shopId,
                pageStart:0,
                pageSize:5
              }
            }
            // {
            //   headers:{
            //     token:token
            //   }
            // }
        )
        .then(res => {
          this.tableData=res.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
  },
  methods:{
    addItem(){
      //
      this.shopId = this.$route.query.id;
      this.$axios
          .get("http://localhost:2321/shop/putAwayItem",{
                params:{
                  shopId:this.shopId,
                  itemId:this.form.itemId
                }
              }
              // {
              //   headers:{
              //     token:token
              //   }
              // }
          )
          .then(res => {
            console.log(res)
          })
          .catch(err => {
            return Promise.reject(err);
          });
    }
  },
  data() {
    return {
      input: '',
      options1: [{
        value1: '选项1',
        label: '未付款'
      }, {
        value1: '选项2',
        label: '已付款'
      }],
      options2: [{
        value2: '选项1',
        label: '实物商品'
      }, {
        value2: '选项2',
        label: '虚拟商品'
      }],
      value:'',
      value2: '',
      value1:'',
      shopId:'',
      tableData: [],
      dialogFormVisible: false,
      form: {
        itemId:''
      },
      formLabelWidth: '120px'
    }
  },
}
</script>

<style scoped>
.order .search span{
  padding: 10px 12px 10px 20px;
  color: #515a6e;
}
.order .search{
  background-color: #f0f0f0;
  padding: 10px 12px 10px 0px;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
}
.order .edit{
  margin: 20px 0 20px 20px;
}
.order .table{
  margin-left: 20px;
  margin-right: 20px;
}
</style>
